<!-- 修改绑定的手机号 -->
<template>
    <div style="height: 800px;">
        <h4 style="margin-bottom: 20px;">其他设置</h4>

        <div>
            <span>手机号:</span>
            <el-input v-model="user.phone" :disabled="isPhone" placeholder="暂未绑定" style="width: 200px;margin-left: 24px;" />
        </div>
        <div style="margin-top: 20px;" :hidden="isUpdate">
            <el-button type="primary" @click="goUpdate">修改</el-button>

        </div>
        <div :hidden="isok" style="margin-top: 20px;">
            <el-form-item label="验证码：">
                <el-row>
                    <el-input type="password" v-model="user.inputCode" placeholder="请输入4位数字验证码" style="width: 200px;" />
                    <el-button type="primary" @click="getCodeStr" plain>
                        获取验证码
                    </el-button>
                </el-row>
            </el-form-item>
            <el-button type="primary" @click="ok" :disabled="isokbutton">确认修改</el-button>
            <el-button @click="reset">取消</el-button>

        </div>
    </div>
</template>

<script lang="ts" setup>

import { ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
import axios from '../../api/index' // 引入axios库进行HTTP请求  
import { el } from 'element-plus/es/locale';
const isPhone = ref(true)
const isUpdate = ref(false)
const isok = ref(true)
const isokbutton = ref(true)
// 从localStorage中获取存储的JSON字符串  
const userInfoJsonString = localStorage.getItem('userInfo')!;

// 解析JSON字符串为JavaScript对象  
const userInfo = JSON.parse(userInfoJsonString);

const user = reactive({
    phone: '',
    inputCode: '',
})
getData();
function getData() {
    user.phone = userInfo.phone
}


function goUpdate() {
    isPhone.value = false
    isUpdate.value = true
    isok.value = false

}

function reset() {

    isPhone.value = true
    isUpdate.value = false
    isok.value = true;
    isokbutton.value = true
    user.inputCode = '';
    getData();
}

function getCodeStr() {
    var numericString = /^[0-9]+$/;
    let istrue = numericString.test(user.phone);

    if (istrue) {
        if (user.phone.length == 11) {



            axios.get('/sms?phone=' + user.phone)
                .then((resp) => {
                    if (resp.code == 2000) {
                        ElMessage.success("验证码发送成功，请在1分钟内验证！");
                        isokbutton.value = false;

                    } else {
                        ElMessage.error("验证码发送失败，手机号输入有误或此手机号已被绑定！")
                    }
                })

        } else {
            ElMessage.error('手机号为11位数字！')
        }
    }else{
        ElMessage.error('手机号不能为汉字、英文、特殊符号！')
    }




}


function ok() {

    axios.put('/user/uphone?username=' + userInfo.username + '&phone=' + user.phone + '&inputCode=' + user.inputCode)
        .then((resp) => {
            if (resp.code == 204) {
                ElMessage.success("修改成功！")
                userInfo.phone = user.phone
                // 将修改后的 userInfo 对象存回 localStorage  
                localStorage.setItem('userInfo', JSON.stringify(userInfo));
                user.inputCode = '';
                isPhone.value = true
                isUpdate.value = false
                isok.value = true;
                isokbutton.value = true
            } else if (resp.code == 405) {
                ElMessage.error(resp.msg)
            } else {
                ElMessage.error("验证码错误！")
            }
        })
}


</script>
